రియాక్ట్ కాంటెక్స్ట్ సబ్‌స్క్రిప్షన్: గ్లోబల్ అప్లికేషన్‌ల కోసం సూక్ష్మ-స్థాయి అప్‌డేట్ నియంత్రణ

ఆధునిక వెబ్ డెవలప్‌మెంట్ యొక్క డైనమిక్ ల్యాండ్‌స్కేప్‌లో, సమర్థవంతమైన స్టేట్ మేనేజ్‌మెంట్ చాలా ముఖ్యం. అప్లికేషన్‌లు సంక్లిష్టంగా పెరిగేకొద్దీ, ముఖ్యంగా గ్లోబల్ యూజర్ బేస్ ఉన్న వాటిలో, అవసరమైనప్పుడు మాత్రమే కాంపోనెంట్‌లు రీ-రెండర్ అయ్యేలా చూసుకోవడం ఒక కీలకమైన పనితీరు సమస్యగా మారుతుంది. రియాక్ట్ యొక్క కాంటెక్స్ట్ API మీ కాంపోనెంట్ ట్రీ అంతటా ప్రాప్ డ్రిల్లింగ్ లేకుండా స్టేట్‌ను పంచుకోవడానికి ఒక శక్తివంతమైన మార్గాన్ని అందిస్తుంది. అయినప్పటికీ, ఒక సాధారణ లోపం ఏమిటంటే, షేర్డ్ స్టేట్‌లో కొంత భాగం మాత్రమే మారినప్పటికీ, కాంటెక్స్ట్‌ను ఉపయోగించే కాంపోనెంట్‌లలో అనవసరమైన రీ-రెండర్‌లను ప్రేరేపించడం. ఈ పోస్ట్ రియాక్ట్ కాంటెక్స్ట్ సబ్‌స్క్రిప్షన్‌లలో సూక్ష్మ-స్థాయి అప్‌డేట్ నియంత్రణ యొక్క కళను వివరిస్తుంది, ఇది మీకు మరింత పనితీరు మరియు స్కేలబుల్ గ్లోబల్ అప్లికేషన్‌లను రూపొందించడానికి అధికారం ఇస్తుంది.

రియాక్ట్ కాంటెక్స్ట్ మరియు దాని రీ-రెండర్ ప్రవర్తనను అర్థం చేసుకోవడం

రియాక్ట్ కాంటెక్స్ట్, కాంపోనెంట్ ట్రీ ద్వారా ప్రతి స్థాయిలో మాన్యువల్‌గా ప్రాప్స్‌ను పాస్ చేయాల్సిన అవసరం లేకుండా డేటాను పంపడానికి ఒక యంత్రాంగాన్ని అందిస్తుంది. ఇది మూడు ప్రధాన భాగాలను కలిగి ఉంటుంది:

• కాంటెక్స్ట్ క్రియేషన్: కాంటెక్స్ట్ ఆబ్జెక్ట్‌ను సృష్టించడానికి React.createContext() ఉపయోగించడం.
• ప్రొవైడర్: దాని కింద ఉన్న కాంపోనెంట్‌లకు కాంటెక్స్ట్ విలువను అందించే కాంపోనెంట్.
• కన్స్యూమర్: కాంటెక్స్ట్ మార్పులకు సబ్‌స్క్రయిబ్ చేసే కాంపోనెంట్. గతంలో, ఇది Context.Consumer కాంపోనెంట్‌తో చేయబడేది, కానీ ఇప్పుడు సాధారణంగా, ఇది useContext హుక్‌తో సాధించబడుతుంది.

రియాక్ట్ యొక్క కాంటెక్స్ట్ API అప్‌డేట్‌లను ఎలా నిర్వహిస్తుందనే దాని నుండి ప్రధాన సవాలు తలెత్తుతుంది. ఒక కాంటెక్స్ట్ ప్రొవైడర్ అందించిన విలువ మారినప్పుడు, ఆ కాంటెక్స్ట్‌ను ఉపయోగించే (ప్రత్యక్షంగా లేదా పరోక్షంగా) అన్ని కాంపోనెంట్‌లు డిఫాల్ట్‌గా రీ-రెండర్ అవుతాయి. ఈ ప్రవర్తన గణనీయమైన పనితీరు అడ్డంకులకు దారితీయవచ్చు, ముఖ్యంగా పెద్ద అప్లికేషన్‌లలో లేదా కాంటెక్స్ట్ విలువ సంక్లిష్టంగా మరియు తరచుగా అప్‌డేట్ చేయబడినప్పుడు. ఒక గ్లోబల్ థీమ్ ప్రొవైడర్‌ను ఊహించుకోండి, ఇక్కడ ప్రాథమిక రంగు మాత్రమే మారుతుంది. సరైన ఆప్టిమైజేషన్ లేకుండా, థీమ్ కాంటెక్స్ట్‌ను వినే ప్రతి కాంపోనెంట్ రీ-రెండర్ అవుతుంది, ఫాంట్ ఫ్యామిలీని మాత్రమే ఉపయోగించే వాటితో సహా.

సమస్య: `useContext`తో విస్తృత రీ-రెండర్‌లు

ఒక సాధారణ దృష్టాంతంతో డిఫాల్ట్ ప్రవర్తనను వివరిద్దాం. మనకు యూజర్ ప్రొఫైల్ కాంటెక్స్ట్ ఉందని అనుకుందాం, ఇది పేరు, ఈమెయిల్, ప్రాధాన్యతలు మరియు నోటిఫికేషన్ కౌంట్ వంటి వివిధ యూజర్ సమాచారాన్ని కలిగి ఉంటుంది. చాలా కాంపోనెంట్‌లకు ఈ డేటా అవసరం కావచ్చు.

            // UserContext.js
import React, { createContext, useState, useContext } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'Global Citizen',
    email: 'citizen@example.com',
    preferences: { theme: 'dark', language: 'en' },
    notificationCount: 0,
  });

  const updateNotificationCount = (count) => {
    setUser(prevUser => ({ ...prevUser, notificationCount: count }));
  };

  return (
    
      {children}
    
  );
};

export const useUser = () => useContext(UserContext);

            

              
                Copy
              
            
          

ఇప్పుడు, ఈ కాంటెక్స్ట్‌ను ఉపయోగించే రెండు కాంపోనెంట్‌లను పరిగణించండి:

            // UserNameDisplay.js
import React from 'react';
import { useUser } from './UserContext';

const UserNameDisplay = () => {
  const { user } = useUser();
  console.log('UserNameDisplay rendered');
  return User Name: {user.name};
};

export default UserNameDisplay;

// UserNotificationCount.js
import React from 'react';
import { useUser } from './UserContext';

const UserNotificationCount = () => {
  const { user, updateNotificationCount } = useUser();
  console.log('UserNotificationCount rendered');
  return (
    

      Notifications: {user.notificationCount}
       updateNotificationCount(user.notificationCount + 1)}>Add Notification
    
  );
};

export default UserNotificationCount;

            

              
                Copy
              
            
          

మీ ప్రధాన App కాంపోనెంట్‌లో:

            // App.js
import React from 'react';
import { UserProvider } from './UserContext';
import UserNameDisplay from './UserNameDisplay';
import UserNotificationCount from './UserNotificationCount';

function App() {
  return (
    
      
Global User Dashboard
      
      
      {/* Other components that might consume UserContext or not */}
    
  );
}

export default App;

            

              
                Copy
              
            
          

మీరు UserNotificationCountలో "Add Notification" బటన్‌ను క్లిక్ చేసినప్పుడు, UserNotificationCount మరియు UserNameDisplay రెండూ రీ-రెండర్ అవుతాయి, అయినప్పటికీ UserNameDisplay వినియోగదారు పేరు గురించి మాత్రమే శ్రద్ధ వహిస్తుంది మరియు నోటిఫికేషన్ కౌంట్‌లో ఆసక్తి లేదు. ఎందుకంటే కాంటెక్స్ట్ విలువలో మొత్తం user ఆబ్జెక్ట్ అప్‌డేట్ చేయబడింది, ఇది UserContext యొక్క వినియోగదారులందరికీ రీ-రెండర్‌ను ప్రేరేపిస్తుంది.

సూక్ష్మ-స్థాయి అప్‌డేట్‌ల కోసం వ్యూహాలు

సూక్ష్మ-స్థాయి అప్‌డేట్‌లను సాధించడానికి కీలకం, కాంపోనెంట్‌లు వాటికి అవసరమైన నిర్దిష్ట స్టేట్ భాగాలకు మాత్రమే సబ్‌స్క్రయిబ్ అయ్యేలా చూడటం. ఇక్కడ కొన్ని ప్రభావవంతమైన వ్యూహాలు ఉన్నాయి:

1. కాంటెక్స్ట్‌ను విభజించడం

అత్యంత సరళమైన మరియు తరచుగా అత్యంత ప్రభావవంతమైన విధానం మీ కాంటెక్స్ట్‌ను చిన్న, మరింత కేంద్రీకృత కాంటెక్స్ట్‌లుగా విభజించడం. మీ అప్లికేషన్‌లోని వివిధ భాగాలకు గ్లోబల్ స్టేట్ యొక్క వేర్వేరు స్లైస్‌లు అవసరమైతే, వాటి కోసం ప్రత్యేక కాంటెక్స్ట్‌లను సృష్టించండి.

మునుపటి ఉదాహరణను రీఫ్యాక్టర్ చేద్దాం:

            // UserProfileContext.js
import React, { createContext, useContext } from 'react';

const UserProfileContext = createContext();

export const UserProfileProvider = ({ children, profileData }) => {
  return (
    
      {children}
    
  );
};

export const useUserProfile = () => useContext(UserProfileContext);

// UserNotificationsContext.js
import React, { createContext, useContext, useState } from 'react';

const UserNotificationsContext = createContext();

export const UserNotificationsProvider = ({ children }) => {
  const [notificationCount, setNotificationCount] = useState(0);

  const addNotification = () => {
    setNotificationCount(prev => prev + 1);
  };

  return (
    
      {children}
    
  );
};

export const useUserNotifications = () => useContext(UserNotificationsContext);

            

              
                Copy
              
            
          

మరియు మీరు వీటిని ఎలా ఉపయోగిస్తారంటే:

            // App.js
import React from 'react';
import { UserProfileProvider } from './UserProfileContext';
import { UserNotificationsProvider } from './UserNotificationsContext';
import UserNameDisplay from './UserNameDisplay'; // Still uses useUserProfile
import UserNotificationCount from './UserNotificationCount'; // Now uses useUserNotifications

function App() {
  const initialProfileData = {
    name: 'Global Citizen',
    email: 'citizen@example.com',
    preferences: { theme: 'dark', language: 'en' },
  };

  return (
    
      
        
Global User Dashboard
        
        
      
    
  );
}

export default App;

// UserNameDisplay.js (updated to use UserProfileContext)
import React from 'react';
import { useUserProfile } from './UserProfileContext';

const UserNameDisplay = () => {
  const userProfile = useUserProfile();
  console.log('UserNameDisplay rendered');
  return User Name: {userProfile.name};
};

export default UserNameDisplay;

// UserNotificationCount.js (updated to use UserNotificationsContext)
import React from 'react';
import { useUserNotifications } from './UserNotificationsContext';

const UserNotificationCount = () => {
  const { notificationCount, addNotification } = useUserNotifications();
  console.log('UserNotificationCount rendered');
  return (
    

      Notifications: {notificationCount}
      Add Notification
    
  );
};

export default UserNotificationCount;

            

              
                Copy
              
            
          

ఈ విభజనతో, నోటిఫికేషన్ కౌంట్ మారినప్పుడు, UserNotificationCount మాత్రమే రీ-రెండర్ అవుతుంది. UserProfileContextకు సబ్‌స్క్రయిబ్ అయిన UserNameDisplay, దాని కాంటెక్స్ట్ విలువ మారనందున రీ-రెండర్ అవ్వదు. ఇది పనితీరుకు గణనీయమైన మెరుగుదల.

గ్లోబల్ పరిగణనలు: గ్లోబల్ అప్లికేషన్ కోసం కాంటెక్స్ట్‌లను విభజించేటప్పుడు, తార్కిక ఆందోళనల విభజనను పరిగణించండి. ఉదాహరణకు, ఒక గ్లోబల్ షాపింగ్ కార్ట్‌లో వస్తువులు, మొత్తం ధర మరియు చెక్అవుట్ స్థితి కోసం ప్రత్యేక కాంటెక్స్ట్‌లు ఉండవచ్చు. ఇది గ్లోబల్ కార్పొరేషన్‌లోని వివిధ విభాగాలు తమ డేటాను స్వతంత్రంగా ఎలా నిర్వహిస్తాయో ప్రతిబింబిస్తుంది.

2. `React.memo` మరియు `useCallback`/`useMemo`తో మెమోయిజేషన్

మీకు ఒకే కాంటెక్స్ట్ ఉన్నప్పటికీ, దానిని ఉపయోగించే కాంపోనెంట్‌లను మెమోయిజ్ చేయడం ద్వారా మీరు ఆప్టిమైజ్ చేయవచ్చు. React.memo అనేది మీ కాంపోనెంట్‌ను మెమోయిజ్ చేసే ఒక ఉన్నత-స్థాయి కాంపోనెంట్. ఇది కాంపోనెంట్ యొక్క మునుపటి మరియు కొత్త ప్రాప్స్‌ను షాలో కంపారిజన్ చేస్తుంది. అవి ఒకేలా ఉంటే, రియాక్ట్ కాంపోనెంట్‌ను రీ-రెండర్ చేయడాన్ని స్కిప్ చేస్తుంది.

అయితే, useContext సాంప్రదాయ పద్ధతిలో ప్రాప్స్‌పై పనిచేయదు; ఇది కాంటెక్స్ట్ విలువ మార్పుల ఆధారంగా రీ-రెండర్‌లను ప్రేరేపిస్తుంది. కాంటెక్స్ట్ విలువ మారినప్పుడు, దానిని ఉపయోగించే కాంపోనెంట్ ప్రభావవంతంగా రీ-రెండర్ చేయబడుతుంది. కాంటెక్స్ట్‌తో React.memoను సమర్థవంతంగా ఉపయోగించుకోవడానికి, మీరు కాంటెక్స్ట్ నుండి నిర్దిష్ట డేటా భాగాలను ప్రాప్స్‌గా అందుకుంటున్నారని లేదా కాంటెక్స్ట్ విలువ స్థిరంగా ఉందని నిర్ధారించుకోవాలి.

మరింత అధునాతన పద్ధతిలో మీ కాంటెక్స్ట్ ప్రొవైడర్‌లో సెలెక్టర్ ఫంక్షన్‌లను సృష్టించడం ఉంటుంది. ఈ సెలెక్టర్‌లు కన్స్యూమర్ కాంపోనెంట్‌లను స్టేట్ యొక్క నిర్దిష్ట స్లైస్‌లకు సబ్‌స్క్రయిబ్ చేయడానికి అనుమతిస్తాయి, మరియు ప్రొవైడర్ వారి నిర్దిష్ట స్లైస్ మారినప్పుడు మాత్రమే సబ్‌స్క్రయిబర్‌లకు తెలియజేయడానికి ఆప్టిమైజ్ చేయబడుతుంది. ఇది తరచుగా useContext మరియు `useMemo`ను ఉపయోగించే కస్టమ్ హుక్స్‌తో అమలు చేయబడుతుంది.

ఒకే కాంటెక్స్ట్ ఉదాహరణకు తిరిగి వెళ్దాం, కానీ కాంటెక్స్ట్‌ను విభజించకుండా మరింత సూక్ష్మమైన అప్‌డేట్‌లను లక్ష్యంగా చేసుకుందాం:

            // UserContextImproved.js
import React, { createContext, useContext, useState, useMemo, useCallback } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'Global Citizen',
    email: 'citizen@example.com',
    preferences: { theme: 'dark', language: 'en' },
    notificationCount: 0,
  });

  // Memoize the specific parts of the state if they are passed down as props
  // or if you create custom hooks that consume specific parts.

  const updateNotificationCount = useCallback((count) => {
    setUser(prevUser => {
      // Create a new user object only if notificationCount changes
      if (prevUser.notificationCount === count) return prevUser;
      return {
        ...prevUser,
        notificationCount: count,
      };
    });
  }, []);

  // Provide specific selectors/values that are stable or only update when needed
  const contextValue = useMemo(() => ({
    user: {
      name: user.name,
      email: user.email,
      preferences: user.preferences
      // Exclude notificationCount from this memoized value if possible
    },
    notificationCount: user.notificationCount,
    updateNotificationCount
  }), [user.name, user.email, user.preferences, user.notificationCount, updateNotificationCount]);

  return (
    
      {children}
    
  );
};

// Custom hooks for specific slices of the context
export const useUserName = () => {
  const { user } = useContext(UserContext);
  // `React.memo` on consuming component will work if `user.name` is stable
  return user.name;
};

export const useUserNotifications = () => {
  const { notificationCount, updateNotificationCount } = useContext(UserContext);
  // `React.memo` on consuming component will work if `notificationCount` and `updateNotificationCount` are stable
  return { notificationCount, updateNotificationCount };
};

            

              
                Copy
              
            
          

ఇప్పుడు, ఈ సూక్ష్మ హుక్స్‌ను ఉపయోగించడానికి కన్స్యూమింగ్ కాంపోనెంట్‌లను రీఫ్యాక్టర్ చేయండి:

            // UserNameDisplay.js
import React from 'react';
import { useUserName } from './UserContextImproved';

const UserNameDisplay = React.memo(() => {
  const userName = useUserName();
  console.log('UserNameDisplay rendered');
  return User Name: {userName};
});

export default UserNameDisplay;

// UserNotificationCount.js
import React from 'react';
import { useUserNotifications } from './UserContextImproved';

const UserNotificationCount = React.memo(() => {
  const { notificationCount, updateNotificationCount } = useUserNotifications();
  console.log('UserNotificationCount rendered');
  return (
    

      Notifications: {notificationCount}
       updateNotificationCount(notificationCount + 1)}>Add Notification
    
  );
});

export default UserNotificationCount;

            

              
                Copy
              
            
          

ఈ మెరుగైన వెర్షన్‌లో:

• `useCallback` updateNotificationCount వంటి ఫంక్షన్‌ల కోసం ఉపయోగించబడుతుంది, ఇది రీ-రెండర్‌లలో స్థిరమైన గుర్తింపును కలిగి ఉండేలా చేస్తుంది, వాటిని ప్రాప్స్‌గా స్వీకరించే చైల్డ్ కాంపోనెంట్‌లలో అనవసరమైన రీ-రెండర్‌లను నివారిస్తుంది.
• `useMemo` ప్రొవైడర్‌లో మెమోయిజ్డ్ కాంటెక్స్ట్ విలువను సృష్టించడానికి ఉపయోగించబడుతుంది. ఈ మెమోయిజ్డ్ ఆబ్జెక్ట్‌లో అవసరమైన స్టేట్ భాగాలను (లేదా ఉత్పాదిత విలువలను) మాత్రమే చేర్చడం ద్వారా, మనం కన్స్యూమర్‌లు కొత్త కాంటెక్స్ట్ విలువ రిఫరెన్స్‌ను స్వీకరించే సంఖ్యను తగ్గించవచ్చు. ముఖ్యంగా, మనం కాంటెక్స్ట్ యొక్క నిర్దిష్ట భాగాలను సంగ్రహించే కస్టమ్ హుక్స్ (useUserName, useUserNotifications) సృష్టిస్తాము.
• `React.memo` కన్స్యూమర్ కాంపోనెంట్‌లకు వర్తింపజేయబడింది. ఎందుకంటే ఈ కాంపోనెంట్‌లు ఇప్పుడు స్టేట్ యొక్క నిర్దిష్ట భాగాన్ని మాత్రమే (ఉదా., userName లేదా notificationCount) ఉపయోగిస్తున్నాయి, మరియు ఈ విలువలు మెమోయిజ్ చేయబడ్డాయి లేదా వాటి నిర్దిష్ట డేటా మారినప్పుడు మాత్రమే అప్‌డేట్ అవుతాయి, కాంటెక్స్ట్‌లో సంబంధం లేని స్టేట్ మారినప్పుడు React.memo రీ-రెండర్‌లను సమర్థవంతంగా నివారించగలదు.

మీరు బటన్‌ను క్లిక్ చేసినప్పుడు, user.notificationCount మారుతుంది. అయితే, ప్రొవైడర్‌కు పంపబడిన `contextValue` ఆబ్జెక్ట్ మళ్లీ సృష్టించబడవచ్చు. కీలకం ఏమిటంటే, useUserName హుక్ `user.name`ను స్వీకరిస్తుంది, ఇది మారలేదు. UserNameDisplay కాంపోనెంట్ React.memoలో చుట్టబడి ఉంటే మరియు దాని ప్రాప్స్ (ఈ సందర్భంలో, useUserName ద్వారా తిరిగి ఇవ్వబడిన విలువ) మారకపోతే, అది రీ-రెండర్ అవ్వదు. అదేవిధంగా, UserNotificationCount రీ-రెండర్ అవుతుంది ఎందుకంటే దాని నిర్దిష్ట స్టేట్ స్లైస్ (notificationCount) మారింది.

గ్లోబల్ పరిగణనలు: ఈ టెక్నిక్ UI థీమ్‌లు లేదా అంతర్జాతీయీకరణ (i18n) సెట్టింగ్‌ల వంటి గ్లోబల్ కాన్ఫిగరేషన్‌లకు ప్రత్యేకంగా విలువైనది. ఒక వినియోగదారు తమ ఇష్టపడే భాషను మార్చినట్లయితే, స్థానికీకరించిన టెక్స్ట్‌ను చురుకుగా ప్రదర్శించే కాంపోనెంట్‌లు మాత్రమే రీ-రెండర్ అవ్వాలి, లొకేల్ డేటాకు చివరికి యాక్సెస్ అవసరమయ్యే ప్రతి కాంపోనెంట్ కాదు.

3. కస్టమ్ కాంటెక్స్ట్ సెలెక్టర్లు (అధునాతనం)

అత్యంత సంక్లిష్టమైన స్టేట్ నిర్మాణాల కోసం లేదా మీకు మరింత అధునాతన నియంత్రణ అవసరమైనప్పుడు, మీరు కస్టమ్ కాంటెక్స్ట్ సెలెక్టర్‌లను అమలు చేయవచ్చు. ఈ పద్ధతిలో ఒక ఉన్నత-స్థాయి కాంపోనెంట్ లేదా ఒక సెలెక్టర్ ఫంక్షన్‌ను ఆర్గ్యుమెంట్‌గా తీసుకునే కస్టమ్ హుక్‌ను సృష్టించడం ఉంటుంది. ఆ హుక్ కాంటెక్స్ట్‌కు సబ్‌స్క్రయిబ్ అవుతుంది, కానీ సెలెక్టర్ ఫంక్షన్ ద్వారా తిరిగి ఇవ్వబడిన విలువ మారినప్పుడు మాత్రమే కన్స్యూమింగ్ కాంపోనెంట్‌ను రీ-రెండర్ చేస్తుంది.

ఇది Zustand లేదా Redux వంటి లైబ్రరీలు తమ సెలెక్టర్‌లతో సాధించేదానికి సమానంగా ఉంటుంది. మీరు ఈ ప్రవర్తనను అనుకరించవచ్చు:

            // UserContextSelectors.js
import React, { createContext, useContext, useState, useMemo, useCallback, useRef, useEffect } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'Global Citizen',
    email: 'citizen@example.com',
    preferences: { theme: 'dark', language: 'en' },
    notificationCount: 0,
  });

  const updateNotificationCount = useCallback((count) => {
    setUser(prevUser => {
      if (prevUser.notificationCount === count) return prevUser;
      return {
        ...prevUser,
        notificationCount: count,
      };
    });
  }, []);

  // The entire user object is the value for simplicity here,
  // but the custom hook handles selection.
  const contextValue = useMemo(() => ({ user, updateNotificationCount }), [user, updateNotificationCount]);

  return (
    
      {children}
    
  );
};

// Custom hook with selection
export const useUserContext = (selector) => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUserContext must be used within a UserProvider');
  }

  const { user, updateNotificationCount } = context;

  // Memoize the selected value to prevent unnecessary re-renders
  const selectedValue = useMemo(() => selector(user), [user, selector]);

  // Use a ref to track the previous selected value
  const previousSelectedValue = useRef();

  useEffect(() => {
    previousSelectedValue.current = selectedValue;
  }, [selectedValue]);

  // Only re-render if the selected value has changed.
  // React.memo on the consuming component combined with this
  // ensures efficient updates.
  const isSelectedValueDifferent = selectedValue !== previousSelectedValue.current;

  return {
    selectedValue,
    updateNotificationCount,
    // This is a simplified mechanism. A robust solution would involve
    // a more complex subscription manager within the provider.
    // For demonstration, we rely on the consuming component's memoization.
  };
};

            

              
                Copy
              
            
          

కన్స్యూమింగ్ కాంపోనెంట్‌లు ఇలా ఉంటాయి:

            // UserNameDisplay.js
import React from 'react';
import { useUserContext } from './UserContextSelectors';

const UserNameDisplay = React.memo(() => {
  // Selector function for user name
  const userNameSelector = (user) => user.name;
  const { selectedValue: userName } = useUserContext(userNameSelector);

  console.log('UserNameDisplay rendered');
  return User Name: {userName};
});

export default UserNameDisplay;

// UserNotificationCount.js
import React from 'react';
import { useUserContext } from './UserContextSelectors';

const UserNotificationCount = React.memo(() => {
  // Selector function for notification count and the update function
  const notificationSelector = (user) => ({ count: user.notificationCount });
  const { selectedValue, updateNotificationCount } = useUserContext(notificationSelector);

  console.log('UserNotificationCount rendered');
  return (
    

      Notifications: {selectedValue.count}
       updateNotificationCount(selectedValue.count + 1)}>Add Notification
    
  );
});

export default UserNotificationCount;

            

              
                Copy
              
            
          

ఈ పద్ధతిలో:

• useUserContext హుక్ ఒక selector ఫంక్షన్‌ను తీసుకుంటుంది.
• ఇది కాంటెక్స్ట్ ఆధారంగా ఎంచుకున్న విలువను లెక్కించడానికి useMemoను ఉపయోగిస్తుంది. ఈ ఎంచుకున్న విలువ మెమోయిజ్ చేయబడుతుంది.
• useEffect మరియు `useRef` కాంబో అనేది selectedValue వాస్తవంగా మారినట్లయితే మాత్రమే కాంపోనెంట్ రీ-రెండర్ అయ్యేలా చేయడానికి ఒక సరళీకృత మార్గం. నిజంగా బలమైన అమలులో ప్రొవైడర్‌లో మరింత అధునాతన సబ్‌స్క్రిప్షన్ మేనేజ్‌మెంట్ సిస్టమ్ ఉంటుంది, ఇక్కడ కన్స్యూమర్‌లు తమ సెలెక్టర్‌లను నమోదు చేసుకుంటారు మరియు ప్రొవైడర్ వాటిని ఎంపికగా తెలియజేస్తుంది.
• React.memoలో చుట్టబడిన కన్స్యూమింగ్ కాంపోనెంట్‌లు, వాటి నిర్దిష్ట సెలెక్టర్ ఫంక్షన్ ద్వారా తిరిగి ఇవ్వబడిన విలువ మారినట్లయితే మాత్రమే రీ-రెండర్ అవుతాయి.

గ్లోబల్ పరిగణనలు: ఈ విధానం గరిష్ట సౌలభ్యాన్ని అందిస్తుంది. ఒక గ్లోబల్ ఈ-కామర్స్ ప్లాట్‌ఫారమ్ కోసం, మీరు అన్ని కార్ట్-సంబంధిత డేటా కోసం ఒకే కాంటెక్స్ట్‌ను కలిగి ఉండవచ్చు, కానీ ప్రదర్శించబడిన కార్ట్ ఐటెమ్ కౌంట్, సబ్‌టోటల్, లేదా షిప్పింగ్ ఖర్చును స్వతంత్రంగా అప్‌డేట్ చేయడానికి సెలెక్టర్‌లను ఉపయోగించవచ్చు.

ఏ వ్యూహాన్ని ఎప్పుడు ఉపయోగించాలి

• కాంటెక్స్ట్‌ను విభజించడం: చాలా సందర్భాలలో ఇది సాధారణంగా ఇష్టపడే పద్ధతి. ఇది శుభ్రమైన కోడ్, మెరుగైన ఆందోళనల విభజన మరియు అర్థం చేసుకోవడానికి సులభంగా ఉంటుంది. మీ అప్లికేషన్‌లోని వివిధ భాగాలు స్పష్టంగా గ్లోబల్ డేటా యొక్క విభిన్న సెట్‌లపై ఆధారపడినప్పుడు దీనిని ఉపయోగించండి.
• `React.memo`, `useCallback`, `useMemo`తో మెమోయిజేషన్ (కస్టమ్ హుక్స్‌తో): ఇది మంచి మధ్యంతర వ్యూహం. కాంటెక్స్ట్‌ను విభజించడం అతిగా అనిపించినప్పుడు, లేదా ఒకే కాంటెక్స్ట్ తార్కికంగా గట్టిగా జతచేయబడిన డేటాను కలిగి ఉన్నప్పుడు ఇది సహాయపడుతుంది. దీనికి ఎక్కువ మాన్యువల్ ప్రయత్నం అవసరం, కానీ ఒకే కాంటెక్స్ట్‌లో సూక్ష్మ నియంత్రణను అందిస్తుంది.
• కస్టమ్ కాంటెక్స్ట్ సెలెక్టర్లు: పై పద్ధతులు కష్టంగా మారినప్పుడు, లేదా మీరు ప్రత్యేక స్టేట్ మేనేజ్‌మెంట్ లైబ్రరీల అధునాతన సబ్‌స్క్రిప్షన్ మోడళ్లను అనుకరించాలనుకున్నప్పుడు అత్యంత సంక్లిష్టమైన అప్లికేషన్‌ల కోసం దీనిని రిజర్వ్ చేయండి. ఇది అత్యంత సూక్ష్మ-స్థాయి నియంత్రణను అందిస్తుంది, కానీ పెరిగిన సంక్లిష్టతతో వస్తుంది.

గ్లోబల్ కాంటెక్స్ట్ మేనేజ్‌మెంట్ కోసం ఉత్తమ పద్ధతులు

రియాక్ట్ కాంటెక్స్ట్‌తో గ్లోబల్ అప్లికేషన్‌లను రూపొందించేటప్పుడు, ఈ ఉత్తమ పద్ధతులను పరిగణించండి:

• కాంటెక్స్ట్ విలువలను సరళంగా ఉంచండి: పెద్ద, ఏకశిలా కాంటెక్స్ట్ ఆబ్జెక్ట్‌లను నివారించండి. వాటిని తార్కికంగా విభజించండి.
• కస్టమ్ హుక్స్‌ను ఇష్టపడండి: కాంటెక్స్ట్ వినియోగాన్ని కస్టమ్ హుక్స్‌లోకి (ఉదా., useUserProfile, useTheme) సంగ్రహించడం మీ కాంపోనెంట్‌లను శుభ్రంగా చేస్తుంది మరియు పునర్వినియోగాన్ని ప్రోత్సహిస్తుంది.
• `React.memo`ను వివేకంతో ఉపయోగించండి: ప్రతి కాంపోనెంట్‌ను `React.memo`లో చుట్టవద్దు. మీ అప్లికేషన్‌ను ప్రొఫైల్ చేయండి మరియు రీ-రెండర్‌లు పనితీరు సమస్యగా ఉన్నచోట మాత్రమే దానిని వర్తింపజేయండి.
• ఫంక్షన్‌ల స్థిరత్వం: ఉద్దేశించని రీ-రెండర్‌లను నివారించడానికి కాంటెక్స్ట్ లేదా ప్రాప్స్ ద్వారా పంపబడిన ఫంక్షన్‌ల కోసం ఎల్లప్పుడూ `useCallback`ను ఉపయోగించండి.
• ఉత్పాదిత డేటాను మెమోయిజ్ చేయండి: బహుళ కాంపోనెంట్‌లచే ఉపయోగించబడే కాంటెక్స్ట్ నుండి ఉత్పాదించబడిన ఏదైనా గణిత విలువల కోసం `useMemo`ను ఉపయోగించండి.
• థర్డ్-పార్టీ లైబ్రరీలను పరిగణించండి: చాలా సంక్లిష్టమైన గ్లోబల్ స్టేట్ మేనేజ్‌మెంట్ అవసరాల కోసం, Zustand, Jotai, లేదా Recoil వంటి లైబ్రరీలు సూక్ష్మ-స్థాయి సబ్‌స్క్రిప్షన్‌లు మరియు సెలెక్టర్‌ల కోసం అంతర్నిర్మిత పరిష్కారాలను అందిస్తాయి, తరచుగా తక్కువ బాయిలర్‌ప్లేట్‌తో.
• మీ కాంటెక్స్ట్‌ను డాక్యుమెంట్ చేయండి: ప్రతి కాంటెక్స్ట్ ఏమి అందిస్తుందో మరియు కన్స్యూమర్‌లు దానితో ఎలా సంభాషించాలో స్పష్టంగా డాక్యుమెంట్ చేయండి. గ్లోబల్ ప్రాజెక్ట్‌లపై పనిచేసే పెద్ద, పంపిణీ చేయబడిన బృందాలకు ఇది చాలా ముఖ్యం.

ముగింపు

రియాక్ట్ కాంటెక్స్ట్‌లో సూక్ష్మ-స్థాయి అప్‌డేట్ నియంత్రణను నేర్చుకోవడం, పనితీరు, స్కేలబుల్ మరియు నిర్వహించదగిన గ్లోబల్ అప్లికేషన్‌లను రూపొందించడానికి అవసరం. వ్యూహాత్మకంగా కాంటెక్స్ట్‌లను విభజించడం, మెమోయిజేషన్ టెక్నిక్‌లను ఉపయోగించడం మరియు కస్టమ్ సెలెక్టర్ పద్ధతులను ఎప్పుడు అమలు చేయాలో అర్థం చేసుకోవడం ద్వారా, మీరు అనవసరమైన రీ-రెండర్‌లను గణనీయంగా తగ్గించవచ్చు మరియు మీ అప్లికేషన్ దాని పరిమాణం లేదా దాని స్టేట్ యొక్క సంక్లిష్టతతో సంబంధం లేకుండా ప్రతిస్పందనగా ఉండేలా చూసుకోవచ్చు.

మీరు వివిధ ప్రాంతాలు, టైమ్ జోన్‌లు మరియు నెట్‌వర్క్ పరిస్థితులలోని వినియోగదారులకు సేవ చేసే అప్లికేషన్‌లను రూపొందించేటప్పుడు, ఈ ఆప్టిమైజేషన్‌లు కేవలం ఉత్తమ పద్ధతులు మాత్రమే కాకుండా, అవసరాలుగా మారతాయి. మీ గ్లోబల్ ప్రేక్షకులకు ఉన్నతమైన వినియోగదారు అనుభవాన్ని అందించడానికి ఈ వ్యూహాలను స్వీకరించండి.